<template>
  <div>
    <n-card class="rd-8 shadow-sm" segmented>
      <full-table
        ref="tableRef"
        cache-key="user-manage"
        :columns="columns"
        :request="getList"
        :row-key="(row) => row.id"
      >
        <template #left-top>
          <n-button type="info" @click="handleAdd"> 新建 </n-button>
        </template>
      </full-table>

      <create-drawer ref="drawerRef" @submit-success="getData" />
      <assign-roles ref="assginRef" :user="checkedRow" />
      <repass ref="repassRef" :user="checkedRow" />
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { useTable } from "./common";
import { useService } from "./service";
import CreateDrawer from "./components/create-drawer/index.vue";
import AssignRoles from "./components/assign-roles/index.vue";
import Repass from "./components/repass/index.vue";

defineOptions({ name: "ManageUser" });

const tableRef = ref();
const drawerRef = ref();
const repassRef = ref();
const assginRef = ref();
const formType = ref<"add" | "edit">("add");
const checkedRow = ref<User>();

const showDrawer = (type: "add" | "edit") => {
  formType.value = type;
  drawerRef.value.showDrawer();
};

const showAssgin = () => assginRef.value.show();

const showRepass = () => repassRef.value.show();

const getData = () => tableRef.value?.getData();

const {
  getList,
  handleUpdateStatus,
  handlePerms,
  handleAdd,
  handleEdit,
  handleRepass,
  handleDelete,
} = useService(checkedRow, showDrawer, showAssgin, showRepass, getData);

const { columns } = useTable(
  handleUpdateStatus,
  handlePerms,
  handleEdit,
  handleRepass,
  handleDelete
);
</script>
